<app-navbar class="navbar mat-elevation-z6"></app-navbar>

<mat-sidenav-container class="container ">
    <mat-sidenav #sidenav mode="side" class="sidebar" opened="true">
        <mat-nav-list>
            <mat-list-item routerLink="dashboard" routerLinkActive="dashboard-highlight">
                <mat-icon>view_quilt</mat-icon>&nbsp;
                <h3>Dashboard</h3>
            </mat-list-item>
            <mat-list-item routerLink="wallet" routerLinkActive="wallet-highlight">
                <mat-icon>account_balance_wallet</mat-icon>&nbsp;
                <h3>Wallets</h3>
            </mat-list-item>
            <mat-list-item routerLink="trading" routerLinkActive="trading-highlight">
                <mat-icon>swap_horiz</mat-icon>&nbsp;
                <h3>Trading</h3>
            </mat-list-item>
            <mat-list-item routerLink="history" routerLinkActive="history-highlight">
                <mat-icon>history</mat-icon>&nbsp;
                <h3>History</h3>
            </mat-list-item>
            <mat-list-item routerLink="settings" routerLinkActive="settings-highlight">
                <mat-icon>settings</mat-icon>&nbsp;
                <h3>Settings</h3>
            </mat-list-item>
            <mat-list-item routerLink="donate" routerLinkActive="donate-highlight">
                <mat-icon>thumb_up</mat-icon>&nbsp;
                <h3>Donate</h3>
            </mat-list-item>
            <mat-divider></mat-divider>
            <mat-list-item>
                <mat-icon>grade</mat-icon>&nbsp;
                <a href="https://github.com/thrasher-corp/gocryptotrader" target="_blank">
                    <h3>GitHub</h3>
                </a>
            </mat-list-item>
            <mat-list-item routerLink="help_outline" routerLinkActive="help-highlight">
                <mat-icon>help</mat-icon>&nbsp;
                <a href="https://github.com/thrasher-corp/gocryptotrader/wiki" target="_blank">
                    <h3>Help</h3>
                </a>
            </mat-list-item>
            <mat-list-item>
                <mat-icon>view_agenda</mat-icon>&nbsp;
                <a href="https://trello.com/b/ZAhMhpOy/gocryptotrader" target="_blank">
                    <h3>Trello</h3>
                </a>
            </mat-list-item>
            <mat-list-item>
                <mat-icon>apps</mat-icon>&nbsp;
                <a href="https://join.slack.com/t/gocryptotrader/shared_invite/enQtNTQ5NDAxMjA2Mjc5LTc5ZDE1ZTNiOGM3ZGMyMmY1NTAxYWZhODE0MWM5N2JlZDk1NDU0YTViYzk4NTk3OTRiMDQzNGQ1YTc4YmRlMTk" target="_blank">
                    <h3>Slack</h3>
                </a>
            </mat-list-item>
            <mat-list-item>
                <mat-icon>bug_report</mat-icon>&nbsp;
                <a href="https://github.com/thrasher-corp/gocryptotrader/issues/new" target="_blank">
                    <h3>Report a bug</h3>
                </a>
            </mat-list-item>
            <mat-divider></mat-divider>
            <mat-list-item *ngIf="isConnected" matTooltip="Online!">
                <mat-icon>network_wifi</mat-icon>&nbsp;
            </mat-list-item>
            <mat-list-item *ngIf="!isConnected" matTooltip="Offline">
                <mat-icon>signal_wifi_off</mat-icon>&nbsp;
            </mat-list-item>
        </mat-nav-list>

    </mat-sidenav>
    <router-outlet class="main"></router-outlet>
</mat-sidenav-container>